<template>
  <CommonPage
    :navigate-props="{ rightEnabled: true, centerContent: 'flex-end' }"
    :scroll-props="{ pulldownEnabled: true, onPulldown }"
    :padding="false"
    custom-class="home-page"
  >
    <template #nav-left>
      <span class="home-page__nickname">{{ nickname }}</span>
    </template>
    <template #nav-center>
      <div class="home-page__operate">
        <CommonButton label="我的" @tap="onNavigatePersional" />
      </div>
    </template>

    <div class="home-page__content" style="padding: 0 7px 7px 7px">
      <div class="home-page__title">
        {{ community }}
        <div class="home-page__title-action">
          <CommonButton class="home-page__jifen">
            <span>健康积分</span>
            <span class="num">{{ healthPoints }}</span>
          </CommonButton>

          <CommonButton class="home-page__jifen" @tap="onNavigateJifen">
            <span>知识积分</span>
            <span class="num">{{ points }}</span>
          </CommonButton>
        </div>
      </div>

      <HomeCard title="健康指标" style="margin-bottom: 30px">
        <TargetGroup />
      </HomeCard>

      <HomeCard title="气象预报">
        <ForecasePanel :data="weatherData" />
      </HomeCard>

      <CommonDivider label="国家重点研发项目支持" sub="2022YFC3600900" />

      <HomeCard title="我的任务" style="margin-bottom: 30px">
        <TaskGroup
          :category="categoryList"
          :updated="isPulldown"
          @preview="onNavigateDetail"
        />
      </HomeCard>

      <HomeCard title="精选推荐">
        <IndexWellContent :data="recomendList" @select="onNavigateDetail" />
      </HomeCard>
    </div>

    <VideoModal v-model="visible" />
  </CommonPage>
</template>

<script lang="ts" setup>
import CommonPage from "@/components/common-page/index.vue";
import CommonButton from "@/components/common-button/index.vue";
import CommonDivider from "@/components/common-divider/index.vue";
import HomeCard from "./components/home-card.vue";
import TargetGroup from "./components/target-group.vue";
import ForecasePanel from "./components/forecase-panel.vue";
import TaskGroup from "./components/task-group.vue";
import IndexWellContent from "@/pages/index/components/index-well-content.vue";

import VideoModal from "./components/video-modal.vue";
import { ref } from "vue";
import Taro, { useDidShow, useLoad } from "@tarojs/taro";
import { useLogin } from "@/hooks/useLogin";
import { apiQueryRecommendTop, apiWeatherForecast } from "@/apis/index";
import { ResponseCodeEnum } from "@/constants/index";
import { apiQuerySelfPoints } from "@/apis/jifen";
import { useUserInfo } from "@/hooks/useUserInfo";
import { IWeatherItem } from "@/apis/types/home";
import { apiQueryCaterogy } from "@/apis/knowledge";
import { ICaterogyItem } from "@/apis/types/knowledge";
import { useTabBarSelected } from "@/hooks/useTabBarSelected";

defineOptions({
  name: "home-page",
});

const { nickname, community, healthPoints } = useUserInfo();
const { setConmunityCode } = useLogin();
const { setSelectIndex } = useTabBarSelected();
const visible = ref(false);
const recomendList = ref([]);
const points = ref(0);
const weatherData = ref<IWeatherItem[]>([]);
const categoryList = ref<ICaterogyItem[]>([]);
const isPulldown = ref(false);

useLoad((param) => {
  const { code } = param;
  if (code) {
    setConmunityCode(code);
  } else {
    setConmunityCode("j5AJUctQk0hW5BHSasbH");
  }

  queryRecommendServer();
  queryWeatherServer();

  querySelfPointServer();

  queryCategoryServer();
});

useDidShow(() => {
  setSelectIndex(0);
});

const onPulldown = async (done: Function) => {
  isPulldown.value = true;
  await querySelfPointServer();
  done();
  isPulldown.value = false;
};
// const onPreview = (id: number) => {
//   Taro.navigateTo({
//     url: `/packageA/pages/knowledge-detail/index?id=${id}`,
//   });
// };

const onNavigateDetail = (id: number) => {
  Taro.navigateTo({
    url: `/packageA/pages/knowledge-detail/index?id=${id}`,
    events: async () => {
      try {
        isPulldown.value = true;
        await querySelfPointServer();
        await queryCategoryServer();
      } catch (error) {
      } finally {
        isPulldown.value = false;
      }
    },
  });
};

const onNavigatePersional = () => {
  Taro.navigateTo({
    url: "/pages/persional/index",
  });
};

const onNavigateJifen = () => {
  Taro.switchTab({
    url: "/pages/jifen/index",
  });
};

const queryRecommendServer = () => {
  apiQueryRecommendTop().then((res: any) => {
    const { code, data } = res;
    if (code === ResponseCodeEnum.SUCCESS) {
      recomendList.value = data;
    }
  });
};

const queryWeatherServer = () => {
  apiWeatherForecast().then((res: any) => {
    const { code, data } = res;
    if (code === ResponseCodeEnum.SUCCESS) {
      weatherData.value = data;
    }
  });
};

const querySelfPointServer = () => {
  apiQuerySelfPoints().then((res: any) => {
    const { code, data } = res;
    if (code === ResponseCodeEnum.SUCCESS) {
      points.value = data.value;
    }
  });
};

const queryCategoryServer = () => {
  apiQueryCaterogy().then((res: any) => {
    const { code, data } = res;
    if (code === ResponseCodeEnum.SUCCESS) {
      categoryList.value = data;
    }
  });
};
</script>

<style lang="less">
.home-page {
  background: linear-gradient(179deg, #bdefe4 0%, rgba(227, 246, 242, 0) 100%);
  &__nickname {
    font-weight: 500;
    font-size: 36px;
    color: #000000;
    line-height: 50px;
  }
  &__operate {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  &__jifen {
    display: flex;
    align-items: center;
    gap: 4px;
    .num {
      color: #6acbb9;
    }
  }

  &__title {
    font-weight: 500;
    font-size: 26px;
    color: #05ab9c;
    line-height: 34px;
    margin-bottom: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-action {
      display: flex;
      align-items: center;
      gap: 12px;
    }
  }
  &__content {
    box-sizing: border-box;
    &-tip {
      text-align: center;
      font-size: 24px;
      color: #b3b2b2;
    }
  }
}
</style>
